<!--
 * @Descripttion: js
 * @Version: 1.0
 * @Author: LeLe
 * @Date: 2022-08-02 10:40:36
 * @LastEditors: LeLe
 * @LastEditTime: 2022-08-02 16:47:44
-->
<template>
  <div>
    <div class="game-main">
      <span
        class="gqk"
        v-for="(item, index) in gqkList"
        :key="index"
        :style="{
          'background-color': item.bgcolor,
          top: item.top + 'px',
          left: item.left + 'px'
        }"
        @mousedown="clearFk(item, index)"
      ></span>
      <span class="tipVisabled" v-show="tipVisabled">{{ tip }}</span>
    </div>
    <div>当前分数：{{ score }}</div>
    <div>作者:LeLe QQ:1113226538</div>
    <div>(游戏规则：点击红方块会失败，点击绿方块加3分，黑方块加1分，黑方块和绿方块触底会失败)</div>
  </div>
</template>

<script>
export default {
  name: 'game-main',
  data() {
    return {
      // 存储方块的数组
      gqkList: [],
      // 新增方块的计时器
      timer: undefined,
      // 掉落速度的计时器
      positionTimer: undefined,
      // 全局时间
      globalTime: 0,
      // 控制掉落速度
      moveSpeed: undefined,
      // 新增方块的速度
      addSpeed: undefined,
      // 帧数
      frames: 30,
      // 分数
      score: 0,
      // 等级提升提示
      tipVisabled: false,
      // 提示
      tip: ''
    }
  },
  methods: {
    // 重置游戏
    restGame() {
      this.stopGame()
      this.gqkList = []
      this.timer = undefined
      this.positionTimer = undefined
      this.position = 0
      this.moveSpeed = undefined
      this.addSpeed = undefined
      this.globalTime = 0
      this.frames = 30
      this.score = 0
      location.reload()
    },
    // 新增方块
    addGqk() {
      let rad = null
      switch (this.globalTime) {
        case 0:
          rad = Math.round(Math.random() * 6)
          break
        case 3:
          rad = Math.round(Math.random() * 6)
          break
        case 6:
          rad = Math.round(Math.random() * 5)
          break
        case 9:
          rad = Math.round(Math.random() * 4)
          break
        case 12:
          rad = Math.round(Math.random() * 4)
          break
        case 15:
          rad = Math.round(Math.random() * 3)
          break
        default:
          rad = Math.round(Math.random() * 6)
      }
      switch (rad) {
        case 0:
          this.gqkList.push({
            top: -150,
            left: Math.round(Math.random() * 3) * 100,
            bgcolor: '#F56C6C',
            score: -1
          })
          break
        case 1:
          this.gqkList.push({
            top: -150,
            left: Math.round(Math.random() * 3) * 100,
            bgcolor: '#67C23A',
            score: 3
          })
          break
        case 2:
          this.gqkList.push({
            top: -150,
            left: Math.round(Math.random() * 3) * 100,
            bgcolor: '#67C23A',
            score: 3
          })
          break
        default:
          this.gqkList.push({
            top: -150,
            left: Math.round(Math.random() * 3) * 100,
            bgcolor: '#000',
            score: 1
          })
      }
    },
    // 开始游戏
    startGame() {
      this.moveSpeed = 5 + this.globalTime
      this.addSpeed = this.moveSpeed * this.frames * 6
      this.fkMove()
      // 新增方块
      this.timer = setInterval(() => {
        this.addGqk()
      }, this.addSpeed)
    },
    // 方块位置变化
    fkMove() {
      this.positionTimer = setInterval(() => {
        this.gqkList.forEach((item, index) => {
          item.top += this.moveSpeed
          if (
            item.top > 450 &&
            item.bgcolor != '#ccc' &&
            item.bgcolor != '#F56C6C'
          ) {
            this.showTip('失败了，您的分数为：' + this.score, 5000)
            this.stopGame()
            setTimeout(() => {
              this.restGame()
            }, 5000)
          }
          // 删除已经掉出去的钢琴块
          // if (item.top > 600) {
          //   this.gqkList[index].splice(index, 1)
          // }
        })
      }, this.frames)
    },
    // 暂停游戏
    stopGame() {
      clearInterval(this.timer)
      clearInterval(this.positionTimer)
    },
    // 清除方块
    clearFk(item, index) {
      // 判断是否失败
      if (item.bgcolor === '#F56C6C') {
        this.showTip('失败了，您的分数为：' + this.score, 5000)
        this.stopGame()
        setTimeout(() => {
          this.restGame()
        }, 5000)
      } else {
        this.gqkList[index].bgcolor = '#ccc'
        this.score = this.score + item.score
      }
      // 提升难度
      if (this.score > 15 && this.score % 15 < 2 && this.globalTime < 15) {
        this.globalTime = this.globalTime + 3
        this.fkMove()
        this.showTip('难度提升，速度加快')
      }
    },
    // 提示
    showTip(tip, time) {
      this.tipVisabled = true
      this.tip = tip
      setTimeout(
        () => {
          this.tipVisabled = false
        },
        time ? time : 2000
      )
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.game-main {
  border: 1px solid #000;
  height: 598px;
  width: 398px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.gqk {
  position: absolute;
  width: 100px;
  height: 150px;
  cursor: pointer;
}
.tipVisabled {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 598px;
  transform: translate(-50%, -50%);
  color: #f56c6c;
  font-weight: bold;
  font-size: 24px;
  transition: 0.5s;
}
</style>
